<template>
  <div style="width: 100%;">
    <el-row>
      <el-col :span="24"><h1>标题栏</h1></el-col>
    </el-row>

    <el-row>
      <el-col :span="4" style="height: 500px;background-color:#545c64; ">
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>elementUI</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="$router.push('/elementUI/layout')">
                布局
              </el-menu-item>
              <el-menu-item index="1-2" @click="$router.push('/elementUI/component')">
                组件
              </el-menu-item>
              <el-menu-item index="1-3" @click="$router.push('/elementUI/form')">
                form
              </el-menu-item>
              <el-menu-item index="1-4" @click="$router.push('/elementUI/chart')">
                图表
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon><location /></el-icon>
              <span>房间管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1">房间信息</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon><location /></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">用户管理</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <el-icon><location /></el-icon>
              <span>个人信息管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1">修改密码</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>


        </el-menu>
      </el-col>

      <el-col :span="20">
           <router-view/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style scoped>

</style>